<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07 - 加载超图</title>
    <script src="../lib/ol6.4.3/ol.js"></script>
    <script src="../lib/proj4/proj4.js"></script>
    <script src="../lib/iclient-openlayers.js"></script>
    <link rel="stylesheet" href="../css/ol6.4.3/ol.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        #map {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>
	const resolutions = [
		0.002746582031249998,
		0.001373291015624999,
		0.0006866455078124995,
		0.00034332275390625065,
		0.00017166137695312497,
		0.00008583068847656249,
		0.00004291534423828124,
		0.00002145767211914062,
		0.00001072883605957031,
		0.000005364418029785166,
		0.000002682209014892583,
		0.0000013411045074462895,
		6.705522537231436e-7
	];
	const projection = ol.proj.get('EPSG:4326');
	// const projection = ol.proj.get("EPSG:4490");
	const projectionExtent = projection.getExtent();

	// let origin = ol.extent.getTopLeft(projectionExtent);
	let origin = ol.extent.getTopRight(projectionExtent);

	const tileGrid = new ol.tilegrid.TileGrid({
		origin: [0, 0],
		resolutions: resolutions,
		extent: projectionExtent
	});

	const center = [106.71, 29.57];

	let url = `https://diffmap.zggyd.com/iserver/services/map-ugcv5-gydbasemap/rest/maps/gyd_basemap`;
	// url = `https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China`;
	// debugger;
	const map = new ol.Map({
		layers: [
			new ol.layer.Tile({
				source: new ol.source.TileSuperMapRest({
					name: '重庆广阳岛',
					url,
					tileGrid
				}),
				projection: projection
			})
		],
		target: 'map',
		view: new ol.View({
			center: center,
			projection: projection,
			zoom: 6,
			maxZoom: 20,
			minZoom: 1,
			resolutions: resolutions
		})
	});
</script>
</body>
</html>